<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '修改卡项',
			size: '30%',
			appendToBody: true
		}"
		show-confirm
		confirm-text="提交"
		@close="reset"
		@confirm="submit"
		:saving="saving"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<el-card shadow="never">
				<!-- 储值卡 -->
				<el-form-item label="卡内余额" prop="vprice" v-if="info.sc_type == 1">
					<el-input
						placeholder="请输入卡内余额"
						oninput="value=value.replace(/[^\d^\.]/g,'')"
						v-model="form.vprice"
						@blur="form.vprice = $event.target.value"
					/>
				</el-form-item>
				<!-- 折扣 -->
				<el-form-item label="折扣" prop="discount" v-if="info.sc_type == 2">
					<el-input
						placeholder="请输入折扣"
						oninput="value=value.replace(/[^\d^\.]/g,'')"
						v-model="form.discount"
						@blur="form.discount = $event.target.value"
					>
						<span slot="append">折</span>
					</el-input>
				</el-form-item>
				<!-- 时限卡 -->
				<el-form-item
					label="有效期至"
					prop="date_type"
					class="validity-time"
					v-if="info.sc_type == 3 || adjourn"
					required
				>
					<el-radio-group v-model="form.date_type" @change="typeChange">
						<el-form-item prop="date1" :rules="form.date_type == 0 ? rules.date1 : []">
							<el-radio :label="0">
								<cl-date-picker
									v-model="form.date1"
									value-format="yyyy-MM-dd"
									:disabled="form.date_type != 0"
									placeholder="选择日期"
									style="width: 100%"
									:picker-options="pickerOptions"
								/>
							</el-radio>
						</el-form-item>
						<el-form-item prop="date2" :rules="form.date_type == 1 ? rules.date2 : []">
							<el-radio :label="1">
								<el-input
									v-model="form.date2"
									style="width: 100%"
									:disabled="form.date_type != 1"
									oninput="value=value.replace(/[^\d]/g,'')"
									@blur="form.date2 = $event.target.value"
								>
									<span slot="prepend">原有效期后</span>
									<span slot="append">天</span>
								</el-input>
							</el-radio>
						</el-form-item>
					</el-radio-group>
				</el-form-item>
				<!-- 总次卡 -->
				<el-form-item label="次数" prop="frequency" v-if="info.sc_type == 4">
					<el-input
						placeholder="请输入次数"
						oninput="value=value.replace(/[^\d]/g,'')"
						v-model.number="form.frequency"
						@blur="form.frequency = Number($event.target.value)"
					/>
				</el-form-item>
				<!-- 分次卡 -->
				<cl-crud style="padding: 0" v-if="info.sc_type == 5">
					<zm-table
						:columns="cardColumns"
						:data="info.serviceList || []"
						:auth-height="false"
					>
						<template #column-total="{ scope: { row, $index } }">
							<el-form-item
								style="margin-bottom: 0"
								:prop="`serviceList.${$index}.total`"
								:rules="rules.total"
							>
								<el-input
									placeholder="请输入次数"
									oninput="value=value.replace(/[^\d]/g,'')"
									v-model.number="row.total"
									@blur="row.total = Number($event.target.value)"
								/>
							</el-form-item>
						</template>
						<cl-empty slot="empty" />
					</zm-table>
				</cl-crud>
			</el-card>
		</el-form>
	</cl-drawer>
</template>
<script>
import dayjs from "dayjs";
export default {
	props: {
		info: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			cardColumns: [
				{ label: "适用服务", prop: "name", minWidth: 200 },
				{ label: "次数", prop: "total", minWidth: 100 }
			],
			form: {
				id: "", //卡id
				status: "", //1有效 2无效
				type: "", //卡类型
				card_name: "", //卡名称
				price: "", //卡售价
				vprice: "", //卡面额(储值卡）
				etime: "", //到期时间
				addtime: "", //购买时间
				sc_type_dec: "", //卡项类型
				dept_name: "", //适用门店
				discount: "", //打折卡 打折扣折扣
				time: "", //时段卡 时间
				frequency: "", //总次卡 次数
				date_type: 0, //有效期
				date1: "",
				date2: "",
				serviceList: []
			},
			rules: {
				vprice: [{ required: true, message: "请输入卡内余额" }],
				discount: [{ required: true, message: "请输入折扣" }],
				date1: [{ required: true, message: "请选择有效期至" }],
				date2: [{ required: true, message: "请请输入有效期至" }],
				frequency: [{ required: true, message: "请输入次数" }],
				total: [{ required: true, message: "请输入次数" }]
			},
			saving: false,
			pickerOptions: {
				disabledDate: (time) => {
					const { etime } = this.info;
					return dayjs(time).isBefore(dayjs(etime));
				}
			},
			// 延期
			adjourn: false
		};
	},
	methods: {
		open(adjourn = false) {
			this.adjourn = adjourn;
			const { etime } = this.info;

			Object.keys(this.form).forEach((k) => {
				this.form[k] = this.info[k] ?? "";
			});
			this.form.date1 = etime || "";
			this.form.date_type = 0;
			this.form.frequency = this.info.card_balance;
			this.$refs.drawer.create();
		},
		close() {
			this.reset();
			this.$refs.drawer.close();
		},
		reset() {
			this.saving = false;
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const { sc_type, cus_id, cc_id } = this.info;
				let { vprice, date_type, date1, date2, discount, frequency, serviceList } =
					this.form;
				let form = {
					cus_id,
					cc_id
				};
				let api = "cardeditnum";
				if (sc_type == 1) {
					// 储值卡
					form.nums = vprice;
					form.time = date_type == 0 ? date1 : date2;
				} else if (sc_type == 2) {
					// 折扣
					form.nums = discount * 10;
				} else if (sc_type == 3 || this.adjourn) {
					// 时限
					api = "carddelay";
					form.type = date_type;
					form.time = date_type == 0 ? date1 : date2;
				} else if (sc_type == 4) {
					// 总次卡
					form.nums = frequency;
				} else if (sc_type == 5) {
					// 分次卡
					form.nums = 0;
					form.other = serviceList.map((v) => ({
						id: v.id,
						type: v.prod_type,
						num: v.total * 1,
						name: v.name
					}));
				}
				this.saving = true;
				await this.$service.servicecard[api](form).done(() => {
					this.saving = false;
				});
				this.$message.success("操作成功");
				this.$emit("confirm");
				this.close();
			});
		},
		typeChange() {
			this.$refs.form.clearValidate(["date1", "date2"]);
		}
	}
};
</script>
<style lang="scss" scoped>
::v-deep {
	.validity-time {
		> .el-form-item__content {
			display: flex;
		}
		.el-radio-group {
			width: 100%;
		}
		.el-radio {
			margin-right: 0;
			display: flex;
			align-items: center;
			.el-radio__label {
				flex: 1;
				.el-form-item {
					width: 100%;
				}
			}
		}
	}
}
</style>
